<template>
  <div>
    <zz-dialog
      title='上传全景图'
      :leftVal="leftVal"
      :visible = visible
      :confirmVal = "confirmVal"
      :isdefineRight = "true"
      :defineVal="defineVal"
      @defineHandle="defineHandle"
      @leftHandle="leftHandle"
      @confirm="confirmData"
      @close="close">
      <div style="width: 700px; height: 480px" v-bar>
        <div v-if="!next">
          <div class="mb20">
            <span style="background-color: #22a6b5;border-radius: 50%;width: 17px;color: #ffffff;display: inline-block;text-align: center;margin-right: 5px">1</span>
            <span>第一步：上传全景图（照片分辨率至少1920X1080，保持16:9比例）</span>
            <zz-upload
              style="margin-top: 15px;overflow: hidden"
              width="698px"
              height="400px"
              button="plus"
              :isTip = "false"
              @updateFile="updateFileHandel"
              :type="['jpg', 'png', 'jpeg']"
              :multiple=false
              :itype=3608>
              <zz-upload-img
                :files="fileList"
                listWidth="100%"
                slot="alone"></zz-upload-img>
            </zz-upload>
            <div>
              <span style="line-height: 30px">全景图拍摄日期：</span>
              <zz-date
                :place="place"
                class="mr10 inline"
                @change="handleChange"
                type="day"
                style="width: 120px">
              </zz-date>
            </div>
          </div>
        </div>

        <div v-else>
          <span style="background-color: #22a6b5;border-radius: 50%;width: 17px;color: #ffffff;display: inline-block;text-align: center;margin-right: 5px">2</span>
          <span>第二步：更新各楼栋进度状态</span>
          <span class="right">日期：{{dayTime}}</span>
          <zz-table
            class="mt20"
            :noPadding="true"
            :title="tableTilte"
            :dataList="dataList"
            @selectCallback="selectCallback"
            @selectsCallback="selectsCallback"
            @handleLoneCall = "handleLoneCall"
            @handleAllCall = "handleAllCall"></zz-table>
        </div>
      </div>
    </zz-dialog>

    <zz-dialog
      title='批量设置进度状态'
      :visible = showvolumeSet
      @confirm="confirmvolumeSet"
      @close="closeVolume">
      <div class="tableClass">
        <table style="width: 400px">
          <tr>
            <th>施工阶段</th>
            <td>
              <zz-select
                class="inline mr10"
                :options="{width: '100%'}"
                :option="dictList"
                :name = dictName
                @optionClick="constructionCallback"></zz-select>
            </td>
          </tr>
          <tr>
            <th>
              <span>阶段进度完</span>
              <span>成百分比(%)</span>
            </th>
            <td>
              <input
                class="input-n240"
                v-model="percentage"
                style="width: 100%" />
            </td>
          </tr>
          <tr>
            <th>进度状态</th>
            <td>
              <zz-select
                style="width: 50%;"
                class="inline mr10"
                :options="{width: '100%'}"
                :option="progressList"
                :name = progressName
                @optionClick="progressCallback"></zz-select>
              <input
                style="width: 20%;border:none;"
                v-if="isShowSelectInput"
                v-model="selectInput">
              <span style="line-height: 22px" v-if="isShowSelectInput">天</span>
            </td>
          </tr>
        </table>
      </div>
    </zz-dialog>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'addProject',
    data () {
      return {
        fileList: [],
        filesUploadList: [],
        fileUuid: '',
        tableTilte: [
          {name: 'check', width: '6%', align: 'left'},
          {name: '楼栋', width: '17%', align: 'left'},
          {name: '施工阶段', width: '17%', align: 'left'},
          {name: '阶段进度完成百分比(%)', width: '24%', align: 'left'},
          {name: '进度状态', width: '25%', align: 'left'}
        ],
        dayTime: '',
        place: '选择时间',
        confirmVal: '下一步',
        percentage: '',
        dataList: [],
        dictList: {},
        dictName: '',
        dictId: '',
        progressList: {
          1: '正常',
          2: '延期'
        },
        progressName: '正常',
        progressId: '1',
        selectInput: '',
        next: false,
        defineVal: '',
        showvolumeSet: false,
        isShowSelectInput: false,
        selectIdList: [],
        leftVal: ''
      }
    },
    watch: {
      visible (value) {
        if (value) {
          this.findDictList()
        } else {
          Object.assign(this.$data, this.$options.data())
        }
      },
      next (value) {
        if (value) {
          this.confirmVal = '上一步'
          this.defineVal = '保存'
          this.leftVal = '批量设置进度状态'
        } else {
          this.confirmVal = '下一步'
          this.defineVal =''
          this.leftVal = ''
        }
      },
      dayTime (value) {
        if (value) {
          this.place = this.dayTime
        }
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      stageId: {
        type: [Number, String],
        default: null
      },
      stageName: {
        type: String,
        default: ''
      }
    },
    methods: {
      findDictList () {
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/gddnMonitorService/queryDictList`
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            res.data.data.forEach((x, index) => {
              this.dictList[x.dictId] = x.dictValue
              if (index === 0) {
                this.dictName = x.dictValue
                this.dictId = x.dictId
              }
            })
            this.findSectionAndBuildingList()
          }
        })
      },
      // 获取楼栋信息以及最新日期设置的楼栋信息
      findSectionAndBuildingList () {
        let data = {
          'stageId': this.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/gddnMonitorService/querySectionAndBuildingList`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            let list = []
            res.data.data.sectionList.forEach(x => {
              let obj = {}
              Object.assign(obj, {empty: ''})
              Object.assign(obj, {name: x.sectionName})
              Object.assign(obj, {construction: ''})
              Object.assign(obj, {percent: ''})
              Object.assign(obj, {state: ''})
              list.push(obj)
              if (x.buildingList) {
                x.buildingList.forEach(y => {
                  let object = {}
                  Object.assign(object, {check: {check: false, checkData: y}})
                  Object.assign(object, {specialdata: {sectionId: x.sectionId, sectionName: x.sectionName, buildingId: y.buildingId, buildingName: y.buildingName, xcoord: y.xcoord, ycoord: y.ycoord}})
                  Object.assign(object, {mleft: y.buildingName})
                  if (y.constructionPhase) {
                    Object.assign(object, {select: {selectName: this.dictList[y.constructionPhase], selectList: this.dictList, selectId: y.constructionPhase}})
                  } else {
                    Object.assign(object, {select: {selectName: this.dictName, selectList: this.dictList, selectId: this.dictId}})
                  }
                  if (y.completePercent) {
                    Object.assign(object, {edit: {value: y.completePercent, type: 'number', width: '140px'}})
                  } else {
                    Object.assign(object, {edit: {value: '', type: 'number', width: '140px'}})
                  }
                  if (y.status) {
                    Object.assign(object, {selects: {selectName: y.status === 1 ? '正常' : '延期', selectList: {1: '正常', 2: '延期'}, selectId: y.status, isShowInput: y.status !== 1, selectInput: y.delayDays, inputType: '天'}})
                  } else {
                    Object.assign(object, {selects: {selectName: '正常', selectList: {1: '正常', 2: '延期'}, selectId: '1', isShowInput: false, selectInput: '', inputType: '天'}})
                  }
                  list.push(object)
                })
              }
            })
            this.dataList = list
          }
        })
      },
      defineHandle () {
        let handleList = this.handleList()
        if (handleList.some((item) => !item.completePercent)) {
          this.$message.warning('请填写所有的阶段进度！')
          return
        }
        let data = {
          'stageId': this.stageId,
          'fileUuid': this.fileUuid,
          'photoDate': this.dayTime,
          'stageName': this.stageName,
          'buildingProgressStatusList': JSON.stringify(handleList)
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/gddnMonitorService/uploadPanorama`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.close()
            this.$emit('addSuccess')
          }
        })
      },
      leftHandle () {
        this.showvolumeSet = true
      },
      handleList () {
        let list = []
        this.dataList.forEach(x => {
          let obj= {}
          if (x.mleft) {
            Object.assign(obj, {sectionId: x.specialdata.sectionId})
            Object.assign(obj, {sectionName: x.specialdata.sectionName})
            Object.assign(obj, {buildingId: x.specialdata.buildingId})
            Object.assign(obj, {buildingName: x.specialdata.buildingName})
            Object.assign(obj, {constructionPhase: x.select.selectId})
            Object.assign(obj, {completePercent: x.edit.value})
            Object.assign(obj, {status: x.selects.selectId})
            if (x.selects.selectId === '2') {
              Object.assign(obj, {delayDays: x.selects.selectInput})
            }
            if (x.specialdata.xcoord) {
              Object.assign(obj, {xcoord: x.specialdata.xcoord})
            }
            if (x.specialdata.ycoord) {
              Object.assign(obj, {ycoord: x.specialdata.ycoord})
            }
            list.push(obj)
          }
        })
        return list
      },
      closeVolume () {
        this.showvolumeSet = false
      },
      close () {
        this.$emit('close')
      },
      confirmData (files) {
        if (this.confirmVal === '下一步') {
          if (!this.dayTime) {
            this.$message.error('请选择上传日期！')
            return
          }
          if (!this.fileUuid) {
            this.$message.error('文件未上传成功，请稍后！')
            return
          }
          this.next = true
        } else {
          this.next = false
        }
      },
      updateFileHandel (files) {
        this.filesUploadList = []
        this.fileList = files
        this.filesUploadList = files.map((file) => {
          return file.fileUuid
        })
        this.fileUuid = this.filesUploadList[0]
      },
      handleChange (value) {
        this.dayTime = value
      },
      // 批量设置进度
      confirmvolumeSet () {
        this.selectIdList.forEach(x => {
          this.dataList.forEach(y => {
            if (y.specialdata && x === y.specialdata.buildingId) {
              y.select.selectId = this.dictId
              y.select.selectName = this.dictName
              y.edit.value = this.percentage
              y.selects.selectId = this.progressId
              y.selects.selectName = this.progressName
              if (this.progressId === '2') {
                y.selects.selectInput = this.selectInput
                y.selects.isShowInput = true
              } else {
                y.selects.selectInput = ''
                y.selects.isShowInput = false
              }
            }
          })
        })
        this.showvolumeSet = false
      },
      constructionCallback (item) {
        this.dictId = item.key
        this.dictName = item.value
      },
      progressCallback (item) {
        if (item.key === '2') {
          this.isShowSelectInput = true
        } else {
          this.isShowSelectInput = false
        }
        this.progressId = item.key
        this.progressName = item.value
      },
      handleLoneCall (items) {
        this.selectIdList = items.map((item) => {
          return item.buildingId
        })
      },
      handleAllCall (items) {
        this.selectIdList = items.map((item) => {
          return item.buildingId
        })
      },
      // dataList数据处理
      selectCallback (item) {
        this.dataList[item.value].select.selectId = item.key
      },
      selectsCallback (item) {
        this.dataList[item.value].selects.selectId = item.key
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>
